import { Routes, Route, Link } from "react-router-dom";
import 'antd/dist/reset.css';
import React, { useState,useEffect } from 'react';
import {
  DesktopOutlined,
  PieChartOutlined,
  TeamOutlined,
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import Home from './pages/Home'

const { Content, Sider } = Layout;

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}
const items = [
  getItem(<Link to={'/'}>主应用</Link>, 'main-app', <PieChartOutlined />),
  getItem(<Link to={'/sub-vue'}>vue应用</Link>, 'sub-vue', <DesktopOutlined />),
  getItem(<Link to={'/sub-react'}>react应用</Link>, 'sub-react', <TeamOutlined />),
  getItem(<Link to={'/sub-umi'}>umi应用</Link>, 'sub-umi', <TeamOutlined />),
];

function App() {
  const [collapsed, setCollapsed] = useState(false);
  const currentPath = window.location.pathname;
  const [selectedPath, setSelectedPath] = useState('main-app'
  );
  const onClick = (e) => {
    setSelectedPath(e.key);
  };
  useEffect(() => {

    return () => {

    }
  }, [])

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <Menu theme='dark' onClick={onClick} defaultSelectedKeys={['main-app']}
          mode="inline" items={items} selectedKeys={[selectedPath || 'main-app']}>
        </Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: '0 16px' }}>
          <Routes>
            <Route path='/' element={<Home />}></Route>
          </Routes>
          <div id='sub-app'></div>
        </Content>
      </Layout>
    </Layout>
  );
}

export default App;
